<!--
 * @ Author: 李皓田
 * @ Create Time: 2022-06-03 19:33:39
 * @ Modified by: 李皓田
 * @ Modified time: 2022-06-30 22:05:59
 * @ Description:
 -->


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>自定义登陆窗口</title>
        <style type="text/css">
            *{
                margin: 0px;
                padding: 0px;
            }
            /* 弹出登陆框按钮 */
            #login-header{
                text-align: center;
                height: 30px;
                line-height: 30px;
            }
            #login-header a{
                font-size: 24px;
                text-decoration: none;
                color: black;
            }

            /* 登陆框主体 */
            .login{
                position: absolute;
                width: 512px;
                height: 284px;
                z-index: 9999;
                display: none;
                background-color: white;
                /* 这里要注意绝对定位的盒子怎么在屏幕显示居中 */
                left: 50%;
                margin-left: -256px;
                margin-top: 142px;
                border: 1px solid gray;
            }
            /* 登陆框标题 */
            .login-title{
                width: 100%;
                height: 40px;
                line-height: 40px;
                text-align: center;
                margin-bottom: 20px;
                cursor: move;
            }
            .login-title span a{
                text-decoration: none;
                border: 1px solid gray;
                font-size: 12px;
                color: black;
                border-radius: 20px;
                width: 40px;
                height: 40px;
                background-color: #fff;
                position: absolute;
                top: -20px;
                right: -20px;
            }

            /* 登陆表单 */
            .login-input{
                margin: 20px 0px 30px 0px;
            }
            .login-input label{
                float: left;
                height: 35px;
                line-height: 35px;
                width: 90px;
                padding-left: 10px;
                text-align: right;
                font-size: 14px;
            }
            .login-input input.list-input{
                height: 35px;
                line-height: 35px;
                width: 350px;
                text-indent: 5px;
            }
            /* 登陆框登陆按钮 */
            .loginSubmit{
                width: 260px;
                height: 40px;
                text-align: center;
                border: 1px solid gray;
                background-color: white;
                margin-left: 120px;

            }

            /* 遮盖层 */
            .bg{
                background-color: #000;
                width: 100%;
                height: 100%;
                top: 0px;
                position: fixed;
                opacity: 0.3;
                -webkit-opacity: 0.3;
                -moz-opacity: 0.3;
                display: none;
            }
        </style>
    </head>
    <body>
        <!-- 弹出登陆框按钮 -->
        <div id="login-header">
            <a id="adminBtn" href="javascript:void(0)">点击，弹出弹窗</a>
        </div>

        <!-- 登陆框主体 -->
        <div id="login" class="login">
            <!-- 登陆框标题 -->
            <div id="login-title" class="login-title">
                登陆
                <span><a id="closeBtn" href="javascript:void(0)">关闭</a></span>
            </div>
            <!-- 登陆框表单 -->
            <div id="login-form">
                <div class="login-input">
                    <label>登录名：</label>
                    <input type="text" placeholder="请输入登录名" class="list-input"/>
                </div>

                <div class="login-input">
                    <label>密  码：</label>
                    <input type="password" placeholder="请输入密码" class="list-input"/>
                </div>
            </div>
            <!-- 登陆框登陆按钮 -->
            <input type="submit"  id="loginSubmit" value="登陆" class="loginSubmit"/>
        </div>

        <!-- 遮盖层 -->
        <div id="bg" class="bg">sada</div>


        <!-- 插入JS代码 -->
        <script type="text/javascript">
            var login=document.getElementById('login');
            var bg=document.getElementById('bg');
            // 1.点击"点击，弹出弹窗",弹出登陆窗口和遮盖层
            var adminBtn=document.getElementById('adminBtn');
            adminBtn.onclick=function(){
                login.style.display="block";
                bg.style.display="block";
                return false;
            }
            // 2.点击"关闭",隐藏登陆窗口和遮盖层
            var closeBtn=document.getElementById('closeBtn');
            closeBtn.onclick=function(){
                login.style.display="none";
                bg.style.display="none";
                return false;
            }
            // 3.鼠标拖拽功能
            var login_title=document.getElementById('login-title');
            login_title.onmousedown=function(e){
                e = e || window.event;
                var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
                var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);

                var boxX=login.offsetLeft;
                var boxY=login.offsetTop;

                var mouse_in_boxX=x-boxX;
                var mouse_in_boxY=y-boxY;

                document.onmousemove=function(e){
                    var x=e.pageX || e.clientX +(document.body.scrollLeft || document.documentElement.scrollLeft);
                    var y=e.pageY || e.clientY +(document.body.scrollTop || document.documentElement.scrollTop);

                    login.style.left=x-mouse_in_boxX+256+'px';
                    login.style.top=y-mouse_in_boxY-142+'px';
                }
            }

            login_title.onmouseup = function(){
                document.onmousemove=null;
            }

        </script>
    </body>
</html>